import React, { useEffect, useState } from 'react'
import stalye from "./table.module.less"
import { Radio, Checkbox, Button } from 'react-vant';

const TableView = ({ header = [], data = [], selectList, selectChange = ()=>{}, editCallBack = ()=>{} }) => {
  const [keys, setKeys] = useState([]);
  const [select, setSelect] = useState([]);

  const getDataAllID = () => {
    return data.map((item) => item?.id);
  }
  const isAllSelect = () => {
    const l = getDataAllID();
    return l.every(item => select.includes(item));
  }
  const CheckboxSelectChange = (type) => {
    let list = [];
    if (type === 'all') {
      if (isAllSelect()) {
        const dataAllID = getDataAllID();
        list = select.filter((item) => !dataAllID.includes(item));
      } else {
        const ll = getDataAllID();
        list = [...new Set([...select, ...ll])];
      }
    } else {
      if (select.includes(type)) {
        list = select.filter((item) => item !== type);
      } else {
        list = [...select, type]
      }
    }
    setSelect(list);
    selectChange(list)
  }
  const RadioSelectChange = (e) => {
    setSelect([e])
    selectChange(e)
  }
  const sortCallBack = (item) => {
    item?.sortCallBack && item?.sortCallBack(item?.key)
  }
  useEffect(() => {
    const list = header.map((item) => item.key);
    setKeys(list)
  }, [header])
  useEffect(() => {
    if (selectList) {
      setSelect(selectList);
    }
  }, [selectList])
  return (
    <div className={stalye.table_gbig_box}>
      <div className={stalye.content_box}>
        <table>
          <thead>
            <tr>
              {header.map((item, index) => {
                return item.key === 'select_many' ? (
                  <Checkbox key={index} style={{ marginTop: 10, marginLeft: 15 }} onChange={() => CheckboxSelectChange("all")} checked={isAllSelect()} shape='square'>
                    {item.title}
                  </Checkbox>
                ) : <th onClick={() => sortCallBack(item)} key={index}>{item.title}</th>
              })}
            </tr>
          </thead>
          <tbody>
            {data.map((item, index) => {
              return item.type === "合计" ? (
                <tr key={index}>
                  <td>合计</td>
                  <td>{item.A}</td>
                </tr>
              ) : (
                <tr style={{ backgroundColor: item?.isBackRegister ? "red" : '', color: item?.isBackRegister ? "#fff" : '' }} key={index}>
                  {keys.map((val, i) => {
                    return val === "select_is" ? (
                      <td key={i}>
                        <Radio.Group key={i} onChange={RadioSelectChange} style={{ marginLeft: 10 }} value={select?.[0] || ''}>
                          <Radio name={item.id} />
                        </Radio.Group>
                      </td>
                    ) : val === "select_many" || val === 'select_many_sing' ? (
                      <td key={i}>
                        <Checkbox checked={select.includes(item.id)} style={{ marginTop: 8, marginLeft: 15 }} onChange={() => CheckboxSelectChange(item.id)} shape='square' />
                      </td>
                    ) : val === 'operation_type' ? (
                      <Button style={{ backgroundColor: "#F58D04", borderRadius: 10, color: "#fff" }} onClick={() => editCallBack(item)} size='small'>
                        编辑
                      </Button>
                    )  : <td key={i}>{item[val]}</td>
                  })}
                </tr>
              )
            })}
          </tbody>
        </table>
      </div>
    </div>
  )
}

export default TableView;
